<template>
  <div class="message_view1">
    <span class="info__date" v-show="false">9月8日,上午10:00</span>
    <div class="message_view__item">
      <img src="@/assets/vue.svg" />
      <div class="message_view__item__right">
        <div class="message_view__item__right__header">
          <span class="username">段康宇</span>
          <span class="date">12.04</span>
        </div>
        <div class="message_view__item__right__body">
          <!-- 普通文本 -->
          <span class="message__text">嗨,金金小张!很高兴认识你,我会把我为这个项目准备的所有危机发给你,之后,我们可以打电话讨论.我会回答你的所有的问题,好吗</span>
          <!-- 更改任务状态 -->
          <el-button type="info" class="update__state">
            <icon-akar-icons-link-chain />
            <span class="update__state__text">用户体验登录+注册</span>
          </el-button>
          <!-- 发送图片 -->
          <div class="send__img">
            <el-button type="primary"
              style="background-color:rgba(21, 192, 230, .2);color: #15C0E6;"><icon-pepicons-pop-paperclip /></el-button>
            <div class="send__img__center">
              <span class="send__img__center__title">site.screens.png</span>
              <span class="size">10MB.PNG</span>
            </div>
            <div class="send__img__right">
              <el-button><icon-bi-three-dots-vertical /></el-button>
              <el-button><icon-material-symbols-cloud-download-outline-rounded /></el-button>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.message_view1 {
  margin: 20px 0;

  .update__state.el-button {
    width: max-content;
    padding: 4px 18px;
    background-color: rgba($color: #15C0E6, $alpha: .2);
    color: rgba($color: #15C0E6, $alpha: 1);

    .update__state__text {
      margin-left: 10px;
    }
  }

  .send__img {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    width: 60%;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;

    &__center {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 4px;
      flex: 1;

      >.size {
        font-size: 12px;
        color: #7D8592;
      }
    }

    &__right {
      display: flex;
      gap: 10px;

      :deep(.el-button.el-button) {
        background-color: #F4F9FD;
        color: #0A1629;
      }
    }
  }

}

.message_view__item {

  display: flex;
  align-items: flex-start;

  gap: 12px;
  padding: 10px 20px;

  >img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  &__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;

    &__header {
      display: flex;
      gap: 5px;
      align-items: center;

      >.username {
        font-size: 16px;
      }

      >.date {
        font-size: 12px;
        color: #ccc;
      }
    }

    &__body {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;

      .message__text {
        text-align: left;
        color: rgba($color: #0A1629, $alpha: .5);
      }
    }
  }
}

.info__date {
  border: 1px solid #f4f4f4;
  // box-shadow: 2px 2px 3px 0 #ccc, -2px -2px 3px #ccc;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 14px;
  color: #7D8592;
}
</style>